<template>
  <div class="artList" ref="list" @scroll="onScroll">
    <!-- 
    isLoading控制它的刷新状态，如果为true就会一直显示加载中，所以数据加载出来了要改成false
    onRefresh当下拉松手时触发
   -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <!-- 
        load事件绑定的onLoad，专门用来加载数据的方法
        调用时机：
            当数据没铺满一屏时自动调用
            当你往上拉拉到底也会自动调用

        finished用来标记是否全部加载完成，默认为false（否则页面一打开就显示加载完了）
            当他的值如果为true就代表全部加载完成，onLoad就不会再被调用了

        v-model绑定的loading，它代表本次加载数据的状态
            为false代表当前没有在加载数据(或者说本次加载完了，可以进行下次加载)
            为true代表当前还正在加载中，不能进行下次加载

            当onLoad被调用时，会自动把它的值改成true，代表正在加载中
            当加载完数据一定要记得手动把这个值改成false，那样才能进行下次加载
     -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell
          :to="`/article?id=${item.art_id}`"
          v-for="item in list"
          :key="item.art_id"
        >
          <template>
            <!-- 标题部分 -->
            <div>{{ item.title }}</div>
            <!-- 图片部分 -->
            <!-- column-num：设置一共有几列 -->
            <van-grid :border="false" :column-num="item.cover.type">
              <van-grid-item v-for="(val, idx) in item.cover.images" :key="idx">
                <van-image class="pic" :src="val" />
              </van-grid-item>
            </van-grid>
            <!-- 信息部分 -->
            <div class="info">
              <span>{{ item.pubdate | relvTime }}</span>
            </div>
          </template>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
// 导入接口
import { articleListAPI } from '@/api'

export default {
  //  声明要接收的父组件传递过来的数据
  props: ['channel_id'],
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      timestamp: Date.now(),
      isLoading: false,
      scrollTop: 0
    }
  },

  // 当重新即将显示时触发
  activated() {
    this.$refs.list.scrollTop = this.scrollTop
  },

  methods: {
    onScroll() {
      // 拿到这个div的往上面滚出去的距离（scrollTop）
      // console.log('....', this.$refs.list.scrollTop)
      this.scrollTop = this.$refs.list.scrollTop
    },
    async onRefresh() {
      // 发请求
      let res = await articleListAPI({
        channel_id: this.channel_id,
        // 这里要写死Date.now()，因为下拉刷新，不管是哪一次都得是加载出最新的新闻
        timestamp: Date.now()
      })

      // 下拉刷新相当于是要替换当前页的新闻，替换成最新新闻
      // 所以不是追加，也就不是push，而是替换，也就是重新赋值
      this.list = res.data.data.results

      // 把加载状态改成false
      this.isLoading = false
    },

    // 列表加载方法
    async onLoad() {
      // 发请求
      let res = await articleListAPI({
        channel_id: this.channel_id,
        timestamp: this.timestamp
      })

      // 这个list在被重新赋值。所以它的长度永远不会超过10
      // 就导致永远铺不满一个屏幕，就会一直调用onLoad,然后加载完了后又是在替换
      // 所以屏幕就一直在加载和替换数据
      // this.list = res.data.data.results

      // 所以我们应该把得到的数据一一铺开再追加到list
      this.list.push(...res.data.data.results)

      // 把上一段新闻的时间戳赋值给timestamp，方便下次去查找下一段新闻
      this.timestamp = res.data.data.pre_timestamp

      // 代表本次加载完成
      this.loading = false

      // 判断是否全部加载完成
      if (this.timestamp == null) {
        this.finished = true
      }
    }
  }
}
</script>

<style lang="less" scoped>
.artList {
  position: fixed;
  top: 90px;
  bottom: 50px;
  overflow: auto;
  width: 100%;
}

.pic {
  width: 100%;
}
</style>
